<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<script>
				cmdList = "/mainicon/data.action";
				cmdUpdate = "/mainicon/updateBanner.action";
				cmdAdd = "/mainicon/getBase.action";
				cmdDelete = "/mainicon/deleteBanner.action";
		</script>
<style>
		#jquery-table td{cursor:pointer !important}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		</style>
	</head>
<body  class="no-skin">

<div  class="load_bg" style="display:none"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
	<div class="page-content">
				<form id="queryForm" action="${cmdList}">
					<div class="page-content-area">
						<div class="row">
							 <div class="col-sm-12">
								<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;margin-top:15px;">
								<hr style="margin-top:0px;margin-bottom:0x">
								<div class="widget-header widget-header-blue widget-header-flat">
										<h4 class="widget-title">Icon管理</h4>
										<div class="widget-toolbar">
											<a href="#" data-action="collapse">
												<i class="ace-icon fa fa-chevron-up"></i>
											</a>
										</div>
									</div>
									<hr>
									<div class=" widget-body">
												<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
													<label class="col-sm-6 control-label" style="text-align:right" for="form-field-select-1">状态:</label>
													<div class="col-sm-6">
														<s:select name="status" list="%{paramsMap.statusList}" listKey="code" listValue="name" headerKey="" headerValue="--请选择--" cssClass="form-control" value="1"></s:select>
													</div>
												</div>
												
												<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
													<label class="col-sm-6 control-label" style="text-align:right" for="form-field-select-1">产品:</label>
													<div class="col-sm-6">
														<s:select name="prdid" id="prdid" list="%{paramsMap.productlist}" listKey="code" headerKey="" headerValue="--请选择--" listValue="name" value="%{paramsMap.product}" cssClass="form-control"></s:select>
													</div>
												</div> 
												
												<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
													<label class="col-sm-6 control-label" style="text-align:right" for="form-field-select-1">类型:</label>
													<div class="col-sm-6">
														<s:select name="type" id="type" list="%{paramsMap.types}" listKey="code" listValue="name" value="%{paramsMap.type}" cssClass="form-control"></s:select>
													</div>
												</div>
												
												<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
													<label class="col-sm-6 control-label" style="text-align:right" for="form-field-select-1">系统:</label>
													<div class="col-sm-6">
														<s:select name="platform" list="%{paramsMap.platformList}" listKey="code" listValue="name" headerKey="" headerValue="--请选择--" cssClass="form-control"></s:select>
													</div>
												</div>
												<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
													<label class="col-sm-6 control-label" style="text-align:right" for="form-field-select-1">位置:</label>
													<div class="col-sm-6">
														<input type="text" name="position">
													</div>
												</div>
												<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
												<div class="widget-main" >
															<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3" style="text-align:right">
																	<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()">
																		<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
																		查询
																	</button>
																	&nbsp;&nbsp;&nbsp;
																	<button class="btn btn-grey  no-border" type="reset">
																		<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
																		重置
																	</button>
																	&nbsp;&nbsp;&nbsp;
																	<button type="button" name="btn-add" class="btn btn-green  no-border" onclick="Javascript:doAdd();">
																		<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
																		新增
																	</button>		
														   </div>
											
												</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
								</div><!-- /.widget-box -->
							</div><!-- /.col-sm-12 -->
						</div><!-- /.row -->
						<hr style="display:none;" id="delete_hr">
							<div class="row">
								<div class="col-xs-12">
										<table id="jquery-table" class="table table-striped table-bordered table-hover">
										</table>
								</div>
							</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</form>
			</div><!-- /.page-content -->
				
				<%@ include file="/common/common-js.jsp" %>
	
		<!-- inline scripts related to this page -->
		<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
		<script type="text/javascript">
		var __map = {};
		$(function(){
			$("#prdid option").each(function(){
				console.log($(this).val());
				  __map[$(this).val()] = $(this).text();
			  })
		})
		//【查询】按钮Click事件
		 function query_any(){
			$(".load_bg").removeAttr("style");
			$(".load_img").removeAttr("style");
			if(jqTable != null){jqTable.fnDraw();}
			else{loaddata();}
			 $("#delete_btn").attr("style","display:block");
			 $("#delete_hr").attr("style","margin-top:0px;margin-bottom:20px;display:block");
		  }
			var jqTable =null;
			var loaddata = function(){
				jQuery(function($) {
					jqTable = $('#jquery-table').dataTable( {
	                    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
					    "columnDefs": [
							{	  
								  "title":"状态",
								  "targets": [0],
								  "name": "status",
								  "data": "status",
								  "bSortable": false,
								  "render": function(value, type, row) { // 返回自定义内容
									  if(value == 0){
											var temp = "<input class='btn btn-success btn-sm' type='button' name='PK' value='上线' onclick='updateBanner("+ row.id +",1)'/><BR/><BR/>" + 
											"<input class='btn btn-blue btn-sm btn-edit-item' type='button' name='PK' value='编辑' data-id=" + row.id + " data-prdid=" + row.app_prd_id  + " /><BR/><BR/>";
			                         		return temp;
									  }else{
											var temp = "<input class='btn btn-success btn-sm' type='button' name='PK' value='下线' onclick='updateBanner("+ row.id +",0)'/><BR/><BR/>" + 
											"<input class='btn btn-blue btn-sm btn-edit-item' type='button' name='PK' value='编辑' data-id=" + row.id + " data-prdid=" + row.app_prd_id  + " /><BR/><BR/>";
			                         		return temp;
									  }
			                      }
							},
					    	{	  
					    		  "title":"id",
					    	  	  "targets": [1],
					    	  	  "data": "id",
					    	  	  "bSortable": false,
					    	},							
					    	{	  
					    		  "title":"渠道",
					    	  	  "targets": [2],
					    	  	  "data": "channel",
					    	  	  "bSortable": false,
					    	},
					    	{
					    		  "title":"平台",  //列名
					    		  "data": "platform",   //JSON返回属性
					    		  "targets": [3], //第几列
					    		  "bSortable": false,
					    	},
					    	{
					    		  "title":"产品名",
					    		  "name":"app_prd_id",
					    		  "data": "app_prd_id",
					    		  "targets": [4],
					    		  "bSortable": false,
					    		  "render":function(value, type, row) {
					    			  if(!value){
					    				  return  "<p> " + "全部"+ "</p>";
					    			  }else{
					    				  var result;
					    				  var str = value.split("#");
					    				  for(i = 0 ; i < str.length; i++){
					    					  if(i == 0){
					    						  result = __map[str[i]];
					    					  }else{
					    						  result = result + "，" + __map[str[i]];
					    					  }
					    				  }
					    				  return "<p> " + result + "</p>";
					    			  }
					    		  }
					    	},
					    	{
					    		  "title":"图片",  //列名
					    		  "data": "imgurl",   //JSON返回属性
					    		  "targets": [5], //第几列
					    		  "bSortable": false,
					    		  "render":function(value, type, row) {
					    			  if(value == null){
					    				  return ""; 
					    			  }
					    			  return "<a href='"+value+"' target='_blank'> <img width='100' height='100' src='"+value+"'/></a>" ;
					    		  }
					    	},
					    	{
					    		  "title":"最小版本Code",
					    		  "name":"minVersionCode",
					    		  "data": "minVersionCode",
					    		  "targets": [6],
					    		  "bSortable": false,
					    	},
					    	{
					    		  "title":"最大版本Code",
					    		  "name":"maxVersionCode",
					    		  "data": "maxVersionCode",
					    		  "targets": [7],
					    		  "bSortable": false,
					    	},
					    	{
					    		  "title":"开始时间",
					    		  "name":"startTime",
					    		  "data": "startTime",
					    		  "targets": [8],
					    		  "bSortable": false,
					    		  "width": "150px" //px 或者 %
					    	},
					    	{
					    		  "title":"结束时间",
					    		  "name":"endTime",
					    		  "data": "endTime",
					    		  "targets": [9],
					    		  "bSortable": false,
					    		  "width": "150px" //px 或者 %
					    	},
					    	{
					    		  "title":"位置",
					    		  "name":"position",
					    		  "data": "position",
					    		  "targets": [10],
					    		  "bSortable": false,
					    	},
					    	{
					    		  "title":"顺序",
					    		  "name":"orderNum",
					    		  "data": "orderNum",
					    		  "targets": [11],
					    		  "bSortable": false,
					    	},
					    	{
					    		  "title":"标题",
					    		  "name":"title",
					    		  "data": "title",
					    		  "targets": [12],
					    		  "bSortable": false,
					    	},
					    	{
								"title" : "操作人",
								"name" : "operator",
								"data" : "operator",
								"targets" : [13],
								"bSortable" : false,
								"width" : "5%"
							},
					    	{
					    		  "title":"跳转",
					    		  "name":"value",
					    		  "data": "value",
					    		  "targets": [14],
					    		  "bSortable": false,
					    		  "render":function(value, type, row) {
					    			  if(value == null){
					    				  return ""; 
					    			  }
					    			  return "<a href='"+value+"' target='_blank'>"+value+"</a>" ;
					    		  }
					    	}
	                  	],
						"sAjaxSource": ctx + cmdList + "?rand=" + Math.random(),//数据源URL
						"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
					   			var data = $('#queryForm').serializeObject();
								data.aoData = JSON.stringify(aoData);
								$.ajax({
									"dataType": 'json',
									"type": "POST",
									"url": sSource,
									"data":data,
									"success": function(resp){
										fnCallback(resp);
										initListPage();
										$(".load_bg").attr("style","display:none");
										$(".load_img").attr("style","display:none");
									},
									"error": function(XMLHttpRequest, textStatus, errorThrown) {
										$(".load_bg").attr("style","display:none");
										$(".load_img").attr("style","display:none");
										alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
									},
								});
						},
						"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
							//console.log("---" + nRow + "+++++" + aData["id"]);
							//=====================这里实现行双击事件======================//
						},
						"sScrollXInner": "100%",
						"sScrollY": "100%",//如果不设置，IE会有问题
				    });
	
			});//end jquery初始化
		}
			
	    function doAdd() {	
	    	var type = $('#type option:selected').val();
	    	openDialogWithRand(cmdAdd+"?id=&type="+type,1000,800,"编辑Banner",function (data){jqTable.fnDraw();});
	    }
	    
	    function editBanner(id) {	
	    	var type = $('#type option:selected').val();
	    	openDialogWithRand(cmdAdd + "?type="+type +"&id=" + id,1000,800,"编辑Banner",function (data){jqTable.fnDraw();});
	    }
	    
	    function removeBanner(id) {	
	    	var answer = window.confirm("是否确认删除该banner");
	    	if(answer){
				$.getJSON(ctx+cmdDelete+"?id="+id,function(result){
					if(result.status == 1){
						jqTable.fnDraw();
					}
				}).error(function(){//失败处理
	 		    	$(".load_bg").attr("style","display:none");
					$(".load_img").attr("style","display:none");
					alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
	 			});
	    	}
	    }
	    
	    function updateBanner(id,status) {	
	    	var title = null;
	    	if (status == 1) {
	    		title = "是否确认上线该banner";
	    	} else {
	    		title = "是否确认下线该banner";
	    	}
	    	
	    	var answer = window.confirm(title);
	    	if(answer){
				$.getJSON(ctx+cmdUpdate+"?id="+id+"&status=" + status,function(result){
					if(result.status == 1){
						jqTable.fnDraw();
					}
				}).error(function(){//失败处理
	 		    	$(".load_bg").attr("style","display:none");
					$(".load_img").attr("style","display:none");
					alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
	 			});
	    	}
	    }
	    
	    
	    $(function(){
	    	$('body').on('click', '.btn-edit-item', function(){
		    	var type = $('#type option:selected').val();
		    	var id = $(this).attr('data-id'),
		    		prdid = $(this).attr('data-prdid');
		    	prdid = prdid.replace(/#/g,"SPLIT");
		    	openDialogWithRand(cmdAdd + "?type="+type +"&id=" + id + "&app_prd_id=" + prdid,1000,800,"编辑Banner",function (data){jqTable.fnDraw();});
		    })	
	    })
		</script>
</body>
</html>
